<template>
  <div>
    <qf-image-cropper
      ref="ImageCropperRef"
     :src="src" 
     :width="size.width" 
     :height="size.height"
     backgroundColor="#ffffff"
     :bounce="false" 
     :choosable="false"
     :radius="0"
     :minScale="0.5"
     :showAngle="false"
     :checkRange="false"
     gpu
     @resetImage="resetImage"
      @crop="handleCrop"
    >
    </qf-image-cropper>
  </div>
</template>

<script>
const app = getApp();
import QfImageCropper from '../../uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue'
  
export default {
  data() {
    return {
      active: {},
      direction: 'portrait',
      src: null,
      size: {
        width: 965,
        height: 1365
      }
    }
  },
  components: {
    QfImageCropper
  },
  onLoad(options) {
    this.direction = options?.direction || 'portrait';
    const target = app.getActiveImage();
    this.active.index = target.index;
    this.active.url = target.url;
    this.active.orgFile = target.orgFile;
    if (this.direction !== 'portrait') {
      // 横向
      this.size.width = 1365;
      this.size.height = 965;
    };
    this.src = target.url;
  },
  methods: {
    // 重置
    resetImage() {
      this.src = this.active.orgFile;
      this.$refs.ImageCropperRef.resetData(this.src);
    },
    handleCrop(e) {
      this.active.url = e.tempFilePath;
      app.setActiveImage({
        index: this.active.index,
        url: this.active.url,
        orgFile: this.active.orgFile
      });
      uni.navigateBack();
    }
  }
}
</script>

<style>
</style>